<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车功能</title>
</head>
<style>
    .gai {
        width: 172px;
        height: 171px;
        background-color: aqua;
        position: absolute;
        top: 35px;
        left: 677px;
        display: none;
    }
</style>

<body>
    <!-- 添加 -->
    产品名: <input type="text" class="add_1">
    价格:<input type="text" class="add_2">
    库存:<input type="text" class="add_3">
    <button onclick="add()">添加</button>
    <!--  -->
    <!-- 修改 -->
    <div class="gai">
        产品名: <input type="text" class="gai_1">
        价格:<input type="text" class="gai_2">
        库存:<input type="text" class="gai_3">
        <button onclick="gai_xiu()">修改</button>
    </div><br>
    <!-- <input type="checkbox" name="" id="ddd">全选
    <input type="checkbox" id="fff">反选 -->
    <table border="1">
        <thead>
            <tr>
                <th> <input type="checkbox" id="ddd"> 全选
                    <input type="checkbox" id="fff">反选
                </th>

                <th>id</th>
                <th>产品名</th>
                <th>价格</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>

                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td><button onclick="xiu()">修改</button>
                    <button onclick="del()">删除</button>
                    <button onclick="xiang()">详情</button>
                </td>
            </tr>
        </tbody>

    </table>
    <button onclick="xxx">删除选中</button>
    <input type="text" class="zhao"><button onclick="cha()">查找</button>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script>
        var arr = [{
            id: 1,
            name: "米家小米新风机空气净化器 除菌 300风量(适用≤105...",
            price: 2799.00,
            stock: 566
        },
        {
            id: 2,
            name: "米家小米新风机空气净化器 除菌 300风量(适用≤105...",
            price: 2799.00,
            stock: 566
        },
        {
            id: 3,
            name: "米家小米新风机空气净化器 除菌 300风量(适用≤105...",
            price: 2799.00,
            stock: 566
        },]
        function apply() {
            $('tbody').html('')
            arr.forEach(item => {
                $('tbody').append(`
                 <tr>
              <td> <input type="checkbox"></td>
               
                <td>${item.id}</td>
                <td>${item.name}</td>
                <td>¥${item.price}元</td>
                <td>${item.stock}件</td>
                <td><button onclick="xiu(${item.id})">修改</button>
                    <button onclick="del(${item.id})">删除</button>
                   
            </tr>
                `)
               
            })
        } apply()
        // 添加
        function add() {
            arr.push({
                id: arr.length,
                name: $('.add_1').val(),
                price: $('.add_2').val(),
                stock: $('.add_3').val()
            })
            apply()
        }
        // 删除
        function del(id) {
            var shan = arr.findIndex(item => item.id == id)
            arr.splice(shan, 1)
            apply()
        }
        // 修改
        // 显示修改
        var iid
        function xiu(id) {
            $('.gai').css('display', 'block')
            iid = id
        }
        // 确认修改
        function gai_xiu() {
            var g = arr.find((item) => item.id == iid)
            g.name = $('.gai_1').val(),
                g.price = $('.gai_2').val(),
                g.stock = $('.gai_3').val()
            $('.gai').css('display', 'none')
            apply()
        }
        // 查招
        function cha() {
            var c = arr.find(item => item.id == $('.zhao').val())
            $('tbody').html(`
             <tr>
                <td>${c.id}</td>
                <td>${c.name}</td>
                <td>¥${c.price}元</td>
                <td>${c.stock}件</td>
                <td><button onclick="xiu(${c.id})">修改</button>
                    <button onclick="del(${c.id})">删除</button>
                    
                </td>
            </tr>
            `)
        }
        //    全选反选
        function qf() {
            $('#ddd').each((index, item) => {
                arr.push($(item).prop('checked'))
            })
        } qf()
        // 全
        $('#ddd').click(() => {
            var a = $(event.target).prop('checked')
            $('tr input').each((index, item) => {
                $(item).prop('checked', a)
            })
        })
       
        // 反
        $('#fff').click(() => {
            $('tr input').each((index, item1) => {
                $(item1).prop('checked', !$(item1).prop('checked'));
            });
        });
        
        // // 删除选中
        // function xxx() {
        //     $('tr input').each((index, item) => {
        //         if (item.checked == true) {
        //             var s = arr.findIndex(item1 => $(item).next().text())
        //             arr.splice(s, 1)

        //         }
        //         // apply()
        //     })
        // }

    </script>
</body>

</html>